<template>
  <div class="categoryId" v-for="item in categoryId.list" :key="item.id">
    <img :src="item.picUrl" />
    <div class="item">
      <i>{{ item.name }}</i>
      <i>{{ item.brief }}</i>
      <p>
        <span id="now">¥{{ item.retailPrice.toFixed(2) }}</span>
        <span id="before">¥{{ item.counterPrice.toFixed(2) }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
defineProps(['categoryId'])
</script>

<style scoped>
.categoryId {
  width: 100%;
  display: flex;
  gap: 10px;
}
img {
  width: 20%;
  object-fit: contain;
  margin-left: 5%;
}
.item {
  display: flex;
  flex-direction: column;
}
i {
  padding: 5px 0;
}
p span {
  padding: 0 10px;
}
#before {
  font-size: 15px;
  text-decoration: line-through;
  color: rgb(145, 145, 145);
}
</style>
